<template>
  <iframe ref="map" @load="onFrameLoad" :src="mapSrc" style="width: 100%;height: 100%" scrolling="auto" frameborder="no"
          seamless>
  </iframe>
</template>
<script>
  import {getByBizId} from "@/api/iot/view";

  export default {
    data() {
      return {
        //
        offlineMap: true,
      }
    },
    computed: {
      /**
       * 在线地图和离线地图使用不同的页面
       */
      mapSrc() {
        const r = Math.random();
        if (this.offlineMap) {
          return '/views/roomMapOffline.html?r=' + r;
        } else {
          return '/views/roomMap.html?r=' + r;
        }
      },
      contentWindow() {
        return this.$refs.map.contentWindow;
      },
    },
    created() {
    },
    methods: {
      onFrameLoad() {
        console.log('onFrameLoad')
        this.contentWindow.initMap({
          parent: this,
          tiles_path: 'http://127.0.0.1:81/mapTiles'
        });
        this.$emit('load');
      },
      goDeviceView(device) {
        //获取设备配置的页面
        getByBizId('product', device.productId).then(res => {
          if (res.code === 200) {
            const view = res.data;
            this.$router.push({
              name: 'DeviceMonitor',
              query: {
                id: view.id,
                deviceCode: device.code,
                deviceId: device.id,
                productId: device.productId
              }
            });
          } else {
            this.msgError(res.msg);
          }
        })
      },

      goRoomView(device) {
        //获取设备配置的页面
        this.$router.push({
          path: '/monitorCenter/room',
          query: {
            roomId: device.id
          }
        });
      },
    }
  }
</script>
